<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/index-cn"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="在 ant.design 中搜索" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>English</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/index-cn"><span>首页</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/spec/introduce-cn"><span>设计语言</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/react/introduce-cn"><span>组件</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="https://www.yuque.com/ant-design/course" class="header-link" target="_blank" rel="noopener noreferrer">教程<span style="display:inline-block;position:relative;top:-2px;width:6px;margin-left:8px"><span class="ant-badge ant-badge-not-a-wrapper"><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup></span></span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Ant Design$Menu" aria-haspopup="true"><h4>Ant Design</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Ant Design$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/introduce-cn"><span>介绍</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/values-cn"><span>设计价值观</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/cases-cn"><span>实践案例</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="原则$Menu" aria-haspopup="true"><h4>原则</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="原则$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/proximity-cn"><span>亲密性</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/alignment-cn"><span>对齐</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/contrast-cn"><span>对比</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/repetition-cn"><span>重复</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/direct-cn"><span>直截了当</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/stay-cn"><span>足不出户</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/lightweight-cn"><span>简化交互</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/invitation-cn"><span>提供邀请</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/transition-cn"><span>巧用过渡</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reaction-cn"><span>即时反应</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="视觉$Menu" aria-haspopup="true"><h4>视觉</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="视觉$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/docs/spec/colors-cn"><span>色彩</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/layout-cn"><span>布局</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/font-cn"><span>字体</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/icon-cn"><span>图标</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="模式$Menu" aria-haspopup="true"><h4>模式</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="模式$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/overview-cn"><span>概览</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/copywriting-cn"><span>文案</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/navigation-cn"><span>导航</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-entry-cn"><span>数据录入</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-display-cn"><span>数据展示</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/feedback-cn"><span>反馈</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/visual-cn">可视化</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/motion-cn">动效</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="其他$Menu" aria-haspopup="true"><h4>其他</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="其他$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/download-cn"><span>设计资源</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reference-cn"><span>致敬</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/work-with-us-cn"><span>加入我们</span><span class="chinese"></span></a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article class="markdown"><h1>色彩<a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/colors.zh-CN.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。</p><p>系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。</p></section><div class="toc-affix"><div class=""><ul class="toc"><li><a class="bisheng-toc-h2" href="#设计师专属" title="设计师专属">设计师专属</a></li><li><a class="bisheng-toc-h2" href="#色彩模型" title="色彩模型">色彩模型</a></li><li><a class="bisheng-toc-h2" href="#系统级色彩体系" title="系统级色彩体系">系统级色彩体系</a></li><li><a class="bisheng-toc-h2" href="#产品级色彩体系" title="产品级色彩体系">产品级色彩体系</a></li><li><a class="bisheng-toc-h2" href="#企业级产品设计中的色彩应用" title="企业级产品设计中的色彩应用">企业级产品设计中的色彩应用</a></li></ul></div></div><section class="markdown"><h2 id="设计师专属"><span>设计师专属</span><a href="#设计师专属" class="anchor">#</a></h2><p>安装 <a href="https://kitchen.alipay.com">💎 Kitchen Sketch 插件  💎</a>，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板。</p><h2 id="色彩模型"><span>色彩模型</span><a href="#色彩模型" class="anchor">#</a></h2><p>Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。</p><h2 id="系统级色彩体系"><span>系统级色彩体系</span><a href="#系统级色彩体系" class="anchor">#</a></h2><p>Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。</p><h3 id="基础色板"><span>基础色板</span><a href="#基础色板" class="anchor">#</a></h3><p>Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。</p><div class="color-palettes"><div class="color-palette"><div class="color-title">Dust Red / 薄暮<span class="color-description">斗志、奔放</span></div><div class="main-color"><div class="main-color-item palatte-red-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-1</span></div><div class="main-color-item palatte-red-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-2</span></div><div class="main-color-item palatte-red-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-3</span></div><div class="main-color-item palatte-red-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-4</span></div><div class="main-color-item palatte-red-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-5</span></div><div class="main-color-item palatte-red-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">red-6</span></div><div class="main-color-item palatte-red-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-7</span></div><div class="main-color-item palatte-red-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-8</span></div><div class="main-color-item palatte-red-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-9</span></div><div class="main-color-item palatte-red-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-10</span></div></div></div><div class="color-palette"><div class="color-title">Volcano / 火山<span class="color-description">醒目、澎湃</span></div><div class="main-color"><div class="main-color-item palatte-volcano-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-1</span></div><div class="main-color-item palatte-volcano-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-2</span></div><div class="main-color-item palatte-volcano-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-3</span></div><div class="main-color-item palatte-volcano-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-4</span></div><div class="main-color-item palatte-volcano-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-5</span></div><div class="main-color-item palatte-volcano-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">volcano-6</span></div><div class="main-color-item palatte-volcano-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-7</span></div><div class="main-color-item palatte-volcano-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-8</span></div><div class="main-color-item palatte-volcano-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-9</span></div><div class="main-color-item palatte-volcano-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-10</span></div></div></div><div class="color-palette"><div class="color-title">Sunset Orange / 日暮<span class="color-description">温暖、欢快</span></div><div class="main-color"><div class="main-color-item palatte-orange-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-1</span></div><div class="main-color-item palatte-orange-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-2</span></div><div class="main-color-item palatte-orange-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-3</span></div><div class="main-color-item palatte-orange-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-4</span></div><div class="main-color-item palatte-orange-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-5</span></div><div class="main-color-item palatte-orange-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">orange-6</span></div><div class="main-color-item palatte-orange-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-7</span></div><div class="main-color-item palatte-orange-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-8</span></div><div class="main-color-item palatte-orange-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-9</span></div><div class="main-color-item palatte-orange-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-10</span></div></div></div><div class="color-palette"><div class="color-title">Calendula Gold / 金盏花<span class="color-description">活力、积极</span></div><div class="main-color"><div class="main-color-item palatte-gold-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-1</span></div><div class="main-color-item palatte-gold-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-2</span></div><div class="main-color-item palatte-gold-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-3</span></div><div class="main-color-item palatte-gold-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-4</span></div><div class="main-color-item palatte-gold-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-5</span></div><div class="main-color-item palatte-gold-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">gold-6</span></div><div class="main-color-item palatte-gold-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-7</span></div><div class="main-color-item palatte-gold-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-8</span></div><div class="main-color-item palatte-gold-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-9</span></div><div class="main-color-item palatte-gold-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-10</span></div></div></div><div class="color-palette"><div class="color-title">Sunrise Yellow / 日出<span class="color-description">出生、阳光</span></div><div class="main-color"><div class="main-color-item palatte-yellow-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-1</span></div><div class="main-color-item palatte-yellow-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-2</span></div><div class="main-color-item palatte-yellow-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-3</span></div><div class="main-color-item palatte-yellow-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-4</span></div><div class="main-color-item palatte-yellow-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-5</span></div><div class="main-color-item palatte-yellow-6" style="color:unset;font-weight:bold" title="click to copy color"><span class="main-color-text">yellow-6</span></div><div class="main-color-item palatte-yellow-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-7</span></div><div class="main-color-item palatte-yellow-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-8</span></div><div class="main-color-item palatte-yellow-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-9</span></div><div class="main-color-item palatte-yellow-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-10</span></div></div></div><div class="color-palette"><div class="color-title">Lime / 青柠<span class="color-description">自然、生机</span></div><div class="main-color"><div class="main-color-item palatte-lime-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-1</span></div><div class="main-color-item palatte-lime-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-2</span></div><div class="main-color-item palatte-lime-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-3</span></div><div class="main-color-item palatte-lime-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-4</span></div><div class="main-color-item palatte-lime-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-5</span></div><div class="main-color-item palatte-lime-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">lime-6</span></div><div class="main-color-item palatte-lime-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-7</span></div><div class="main-color-item palatte-lime-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-8</span></div><div class="main-color-item palatte-lime-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-9</span></div><div class="main-color-item palatte-lime-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-10</span></div></div></div><div class="color-palette"><div class="color-title">Polar Green / 极光绿<span class="color-description">健康、创新</span></div><div class="main-color"><div class="main-color-item palatte-green-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-1</span></div><div class="main-color-item palatte-green-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-2</span></div><div class="main-color-item palatte-green-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-3</span></div><div class="main-color-item palatte-green-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-4</span></div><div class="main-color-item palatte-green-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-5</span></div><div class="main-color-item palatte-green-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">green-6</span></div><div class="main-color-item palatte-green-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-7</span></div><div class="main-color-item palatte-green-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-8</span></div><div class="main-color-item palatte-green-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-9</span></div><div class="main-color-item palatte-green-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-10</span></div></div></div><div class="color-palette"><div class="color-title">Cyan / 明青<span class="color-description">希望、坚强</span></div><div class="main-color"><div class="main-color-item palatte-cyan-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-1</span></div><div class="main-color-item palatte-cyan-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-2</span></div><div class="main-color-item palatte-cyan-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-3</span></div><div class="main-color-item palatte-cyan-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-4</span></div><div class="main-color-item palatte-cyan-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-5</span></div><div class="main-color-item palatte-cyan-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">cyan-6</span></div><div class="main-color-item palatte-cyan-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-7</span></div><div class="main-color-item palatte-cyan-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-8</span></div><div class="main-color-item palatte-cyan-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-9</span></div><div class="main-color-item palatte-cyan-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-10</span></div></div></div><div class="color-palette"><div class="color-title">Daybreak Blue / 拂晓蓝<span class="color-description">包容、科技、普惠</span></div><div class="main-color"><div class="main-color-item palatte-blue-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-1</span></div><div class="main-color-item palatte-blue-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-2</span></div><div class="main-color-item palatte-blue-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-3</span></div><div class="main-color-item palatte-blue-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-4</span></div><div class="main-color-item palatte-blue-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-5</span></div><div class="main-color-item palatte-blue-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">blue-6</span></div><div class="main-color-item palatte-blue-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-7</span></div><div class="main-color-item palatte-blue-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-8</span></div><div class="main-color-item palatte-blue-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-9</span></div><div class="main-color-item palatte-blue-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-10</span></div></div></div><div class="color-palette"><div class="color-title">Geek Blue / 极客蓝<span class="color-description">探索、钻研</span></div><div class="main-color"><div class="main-color-item palatte-geekblue-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-1</span></div><div class="main-color-item palatte-geekblue-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-2</span></div><div class="main-color-item palatte-geekblue-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-3</span></div><div class="main-color-item palatte-geekblue-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-4</span></div><div class="main-color-item palatte-geekblue-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-5</span></div><div class="main-color-item palatte-geekblue-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">geekblue-6</span></div><div class="main-color-item palatte-geekblue-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-7</span></div><div class="main-color-item palatte-geekblue-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-8</span></div><div class="main-color-item palatte-geekblue-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-9</span></div><div class="main-color-item palatte-geekblue-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-10</span></div></div></div><div class="color-palette"><div class="color-title">Golden Purple / 酱紫<span class="color-description">优雅、浪漫</span></div><div class="main-color"><div class="main-color-item palatte-purple-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-1</span></div><div class="main-color-item palatte-purple-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-2</span></div><div class="main-color-item palatte-purple-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-3</span></div><div class="main-color-item palatte-purple-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-4</span></div><div class="main-color-item palatte-purple-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-5</span></div><div class="main-color-item palatte-purple-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">purple-6</span></div><div class="main-color-item palatte-purple-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-7</span></div><div class="main-color-item palatte-purple-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-8</span></div><div class="main-color-item palatte-purple-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-9</span></div><div class="main-color-item palatte-purple-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-10</span></div></div></div><div class="color-palette"><div class="color-title">Magenta / 法式洋红<span class="color-description">明快、感性</span></div><div class="main-color"><div class="main-color-item palatte-magenta-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-1</span></div><div class="main-color-item palatte-magenta-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-2</span></div><div class="main-color-item palatte-magenta-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-3</span></div><div class="main-color-item palatte-magenta-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-4</span></div><div class="main-color-item palatte-magenta-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-5</span></div><div class="main-color-item palatte-magenta-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">magenta-6</span></div><div class="main-color-item palatte-magenta-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-7</span></div><div class="main-color-item palatte-magenta-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-8</span></div><div class="main-color-item palatte-magenta-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-9</span></div><div class="main-color-item palatte-magenta-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-10</span></div></div></div></div><p>Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。</p><blockquote><p>Ant Design 三代色板的历史可以参看社区文章：<a href="https://zhuanlan.zhihu.com/p/32422584">Ant Design 色板生成算法演进之路</a>。</p></blockquote><h3 id="中性色板"><span>中性色板</span><a href="#中性色板" class="anchor">#</a></h3><p>中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。</p><div class="color-palette-horizontal"><div class="main-color"><div class="main-color-item palatte-grey-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-1</span></div><div class="main-color-item palatte-grey-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-2</span></div><div class="main-color-item palatte-grey-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-3</span></div><div class="main-color-item palatte-grey-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-4</span></div><div class="main-color-item palatte-grey-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-5</span></div><div class="main-color-item palatte-grey-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">grey-6</span></div><div class="main-color-item palatte-grey-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-7</span></div><div class="main-color-item palatte-grey-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-8</span></div><div class="main-color-item palatte-grey-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-9</span></div><div class="main-color-item palatte-grey-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-10</span></div></div></div><h3 id="数据可视化色板（敬请期待）"><span>数据可视化色板（敬请期待）</span><a href="#数据可视化色板（敬请期待）" class="anchor">#</a></h3><p>数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 『有效、清晰、准确、美』的原则产生的。</p><h3 id="色板生成工具"><span>色板生成工具</span><a href="#色板生成工具" class="anchor">#</a></h3><p>如果上面的色板不能满足你的需求，你可以选择一个主色，Ant Design 的色彩生成算法会为你生成完整的色板。</p><div class="color-palette-horizontal"><div class="color-palette-pick"><span>选择你的主色</span></div><div class="main-color"><div class="main-color-item" style="background:#e6f7ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->1<span class="main-color-value">#e6f7ff</span></div><div class="main-color-item" style="background:#bae7ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->2<span class="main-color-value">#bae7ff</span></div><div class="main-color-item" style="background:#91d5ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->3<span class="main-color-value">#91d5ff</span></div><div class="main-color-item" style="background:#69c0ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->4<span class="main-color-value">#69c0ff</span></div><div class="main-color-item" style="background:#40a9ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->5<span class="main-color-value">#40a9ff</span></div><div class="main-color-item" style="background:#1890ff;color:#fff;font-weight:bold" title="click to copy color">color-<!-- -->6<span class="main-color-value">#1890ff</span></div><div class="main-color-item" style="background:#096dd9;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->7<span class="main-color-value">#096dd9</span></div><div class="main-color-item" style="background:#0050b3;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->8<span class="main-color-value">#0050b3</span></div><div class="main-color-item" style="background:#003a8c;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->9<span class="main-color-value">#003a8c</span></div><div class="main-color-item" style="background:#002766;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->10<span class="main-color-value">#002766</span></div></div><div class="color-palette-picker"><span style="display:inline-block;vertical-align:middle"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:120px;height:24px;border-radius:2px;background:#1890ff"></div></div></div></span><span class="color-palette-picker-value">#1890ff</span><span class="color-palette-picker-validation"></span></div></div><hr/><h2 id="产品级色彩体系"><span>产品级色彩体系</span><a href="#产品级色彩体系" class="anchor">#</a></h2><h3 id="品牌色的应用"><span>品牌色的应用</span><a href="#品牌色的应用" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/msiCkgfDaDgrTUuumxlq.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。
Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。</p><h3 id="功能色"><span>功能色</span><a href="#功能色" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/XrBtAnEiozhuTdrifhFr.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：</p><h3 id="中性色"><span>中性色</span><a href="#中性色" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/WAlfDnpYniUjaLzmnIqf.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：</p><hr/><h2 id="企业级产品设计中的色彩应用"><span>企业级产品设计中的色彩应用</span><a href="#企业级产品设计中的色彩应用" class="anchor">#</a></h2><p>在蚂蚁中后台的设计中，我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。</p></section><section class="markdown api-container"></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/docs/spec/reaction-cn"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>即时反应</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/docs/spec/layout-cn"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>布局</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>相关资源</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch 工具集</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>脚手架市场</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React 应用开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>数据流前端框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>设计动效</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure 部件库</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>页面逻辑素材</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>国内镜像站点 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>社区</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>知乎专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>体验科技专栏</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>蚂蚁体验科技大会</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>加入我们</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>帮助</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>更新记录</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design 实战教程</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>常见问题</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>在线讨论 (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>在线讨论 (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>报告 Bug</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>讨论列表</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>更多产品</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>语雀</span></a><span> - </span><span>知识创作与分享工具</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>数据可视化</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>蚂蚁体验云</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
